<template>
    <!-- banner轮播 -->
    <view class="diy-banner">
        <swiper
            :snap-to-edge="true"
            :autoplay="autoplay"
            :class="'banner-box swiper-box big-swiper-box dot-' + itemStyle.btnShape"
            :duration="duration"
            :circular="true"
            :indicator-dots="dataList.length > 1"
            :interval="params.interval"
            indicator-color="rgba(255,255,255,.6)"
            indicator-active-color="#fff"
            @change="_bindChange"
            :data-item-key="itemIndex"
        >
           <!-- <swiper-item v-for="(banner, index) in dataList" :key="index">
                <image
                    @tap.stop.prevent="navigationTo"
                    :data-url="banner.linkUrl"
					:class="'slide-image big-slide-image'"
                    @load="_imagesHeight"
                    :src="banner.imgUrl"
                    :data-id="index"
                    :data-item-key="itemIndex"
                ></image>
            </swiper-item> -->
			<swiper-item v-for="(banner, index) in dataList" :key="index">
			    <image
			        :data-url="banner.linkUrl"
					:class="'slide-image big-slide-image'"
			        @load="_imagesHeight"
			        :src="banner.imgUrl"
			        :data-id="index"
			        :data-item-key="itemIndex"
			    ></image>
			</swiper-item>
        </swiper>
        <!-- 顶部置灰 -->
        <!-- <view class="linear"></view> -->
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            // banner轮播组件属性
            indicatorDots: true,

            // 是否显示面板指示点
            autoplay: true,

            // 是否自动切换
            duration: 800,

            // 滑动动画时长
            imgHeights: [],

            // 图片的高度
            // 当前banne所在滑块指针
            imgCurrent: 0,

            banner: {
                linkUrl: '',
                imgUrl: ''
            }
        };
    },
    options: {},
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        dataList: Array,
        params: Object
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 计算图片高度
         */
        _imagesHeight: function (e) {
            let imgwidth = e.detail.width;
            let imgheight = e.detail.height;
            let // 宽高比
                ratio = imgwidth / imgheight; // 计算的高度值
            // 获取图片真实宽度
            let viewHeight = 750 / ratio;
            let imgHeights = this.imgHeights; // 把每一张图片的高度记录到数组里
            imgHeights.push(viewHeight);
            this.setData({
                imgHeights
            });
        },

        /**
         * 记录当前指针
         */
        _bindChange: function (e) {
            this.setData({
                imgCurrent: e.detail.current
            });
        },

        /**
         * 跳转到指定页面
         */
        navigationTo: function (e) {
			console.log(e.currentTarget.dataset.url)
			let id = e.currentTarget.dataset.url.split('=')[1]
			// console.log(id)
            // app.navigationTo(e.currentTarget.dataset.url);
			
			uni.navigateTo({
				 // url: '/pages/article/detail/index?article_id=' + id
				 url: '/pages/index/tip/tip'
			})
        }
    }
};
</script>
<style lang="scss">
/* banner轮播 */
.diy-banner {
    position: relative;
}
.swiper-box {
    height: 346rpx;
}
.swiper-box.big-swiper-box {
    height: 376rpx;
}
.swiper-box swiper-item {
    box-sizing: border-box;
}

.diy-banner .slide-image {
    width: 608rpx;
    height: 292rpx;
    display: block;
    border-radius: 15rpx;
    margin-left: 40rpx;
}

.diy-banner .slide-image.big-slide-image {
    width: 670rpx;
    height: 321.6rpx;
    margin: 0 auto;
}

/* 顶部置灰 */

.diy-banner .linear {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.4rem;
    background: linear-gradient(#111, transparent);
    opacity: 0.6;
    z-index: 9;
}

.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
    margin-bottom: 2rpx;
}

/* banner组件按钮 */

.swiper-box .wx-swiper-dot {
    height: 20rpx;
    width: 20rpx;
}

.swiper-box.dot-rectangle .wx-swiper-dot {
    width: 30rpx;
    border-radius: unset;
}

.swiper-box.dot-square .wx-swiper-dot {
    border-radius: unset;
}
</style>
